import React, { Component, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  decrement,
  randomNum,
} from "../store/modules/countStore.js";
import { fetchList } from "../store/modules/asyncStore.js";
export default function ReduxJSTookit() {
  const { count } = useSelector((state) => state.counter);
  const { msg } = useSelector((state) => state.fetchlist);
  let dispatch = useDispatch();

  let increment1 = () => {
    dispatch(increment("传递来的数据"));
  };
  useEffect(() => {
    dispatch(fetchList());
  }, []);
  let decrement1 = () => {
    dispatch(decrement());
  };
  return (
    <>
      <h1>reduxjs/toolkit,react-redux的使用</h1>
      <p>store的数据：{count}</p>
      <button onClick={increment1}>num++</button>
      <button onClick={decrement1}>num--</button>
      <button onClick={() => dispatch(randomNum(Math.random()))}>随机数</button>
      {msg.map((item) => (
        <div key={item.id}>{item.address}</div>
      ))}
      <button onClick={() => dispatch(fetchList())}>发送请求</button>
    </>
  );
}
